<template>
  <div>
    <div>
      <van-sticky>
        <van-nav-bar title="写评论" left-arrow @click-left="onClickLeft" />
      </van-sticky>
    </div>
    <div
      class="commentHeader"
      v-for="(item, index) in commentData"
      :key="index"
    >
      <img :src="item.img" alt="" />
      <h2>{{ item.name }}医生</h2>
      <van-rate
        style="height: 0.2rem; line-height: 0.2rem"
        v-model="fromData.recover"
        color="#ffd21e"
        :size="50"
        void-icon="star"
        void-color="#eee"
      />
      <p>---------非常满意---------</p>
    </div>
    <ul class="commentUl">
      <li>建议有帮助</li>
      <li>好转恢复快</li>
      <li>专业有经验</li>
      <li>耐心态度好</li>
      <li>讲解很清晰</li>
      <li>给了我希望</li>
    </ul>
    <div class="commentContent">
      <div class="commentContentbox1">
        <h2>评价内容</h2>
        <span class="commentContentbox1span">如何描述？</span>
        <van-cell-group inset>
          <van-field
            v-model="fromData.content"
            rows="2"
            autosize
            type="textarea"
            maxlength="在写10个字,可获得问诊优惠大礼包"
            placeholder="写出您的就医经历,帮助更多患友,就医少走弯路!描述您的病情、治疗方式、治疗过程、治疗效果、为什么选择该医生、医生对您的帮助等。描述越详细,对患友的帮助越大哦!"
            show-word-limit
          />
        </van-cell-group>
      </div>
      <div class="commentContentbox2">
        <h2>选择就诊人</h2>
        <div class="commentContentbox2div">+</div>
      </div>
      <div class="commentContentbox3">
        <h2>就诊疾病</h2>
        <p>头痛</p>
        <span>></span>
      </div>
      <div class="commentContentbox4">
        <h2>上传就诊凭证</h2>
        <dl>
          <dt>
            <div>+</div>
          </dt>
          <dd>
            上传就诊凭证,如病例、检查单等有医生患者信息的资料(仅限审核使用保障真实性)
          </dd>
        </dl>
      </div>
      <div class="commentContentbox5">
        <h2>发布条款</h2>
        <van-checkbox v-model="checked" class="checkbox">
          <p>
            本人同意
            <a href="/mes">《微医评论发布条款》</a>
            ,评论内容可由平台脱敏后展示,承诺为医生真实患者,内容客观,冰对言论负责<br />
            允许平台选择您的评价作为就医分享同步到患患社区进行展示,并加入对应社区
          </p>
        </van-checkbox>
      </div>
    </div>
    <div class="commentContentbox6" @click="postComment">
      <van-button type="primary" class="box5btn">提交评价</van-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import instance from "../axios/index";
import { useCounterStore } from "../pinia/index";
import { showToast } from "vant";
const commentData = ref([]);
const checked = ref(false);
const stores = useCounterStore();
interface UserInfo {
  name: string;
  img: string;
  id: string;
}
interface FromData {
  id: number;
  timestamp: string;
  recover: string;
  content: string;
}
const comments = ref([]);
const fromData = ref<FromData>({
  id: 0,
  recover: "",
  content: "",
  timestamp: "",
});
let numberID = Math.floor(Math.random() * 900000) + 100000;

// 获取一个 1-5 中间的随机数 赋值给星数
// let randomNumber = Math.floor(Math.random() * 5) + 1;
let currentDate = new Date();
let year = currentDate.getFullYear();
let month = currentDate.getMonth() + 1; // 月份是从0开始计数的，所以要加1
let day = currentDate.getDate();

// 点击发布评论
const postComment = () => {
  if (!checked.value) {
    showToast("请阅读并同意协议");
    return;
  } else {
    // 判断是否填写内容
    if (fromData.value.content) {
      fromData.value.timestamp = `${year}-${month}-${day}`;
      // id = 获取总条数的长度加1
      // 时间 动态获取当前时间添加 timestamp
         comments.value = {
        id: (fromData.value.id = numberID),
        timestamp: fromData.value.timestamp,
        content: fromData.value.content,
        recover: fromData.value.recover,
        name: localStorage.getItem('user'),
        img: localStorage.getItem('img'),
      };
      stores.comment.push(comments.value);
      console.log(stores.comment);
      //然后把值变为空
      fromData.value.content = "";
      
      onClickLeft();
    } else {
      alert("请填写内容");
    }
  }
};

const store = useCounterStore();
const list = ref<UserInfo>(store.data);

instance.post("/api/homeall").then((res) => {
  res.data.data.forEach((item: any) => {
    if (item.id === list.value.id) {
      commentData.value.push(item);
    }
  });
});

const onClickLeft = () => history.back();
</script>

<style scoped lang="scss">
.commentHeader {
  width: 100%;
  text-align: center;
}
.commentHeader img {
  width: 1rem;
  width: 1rem;
  border-radius: 50%;
}
.commentHeader h2 {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}
.commentHeader p {
  margin-top: 0.2rem;
  color: #ceced3;
}
.commentContent {
  width: 89%;
  padding: 0.2rem;
  // background-color: red;
}
.commentUl {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.commentUl li {
  text-align: center;
  width: 25%;
  height: 0.1rem;
  line-height: 0.1rem;
  background-color: #f5f5f5;
  padding: 0.15rem;
  margin: 0.15rem;
  border-radius: 0.2rem;
}
.commentContentbox1 {
  position: relative;
}
.commentContentbox1 h2 {
  height: 0.6rem;
  line-height: 0.6rem;
}
.commentContentbox1span {
  position: absolute;
  left: 1.1rem;
  top: 0.23rem;
  color: #3f86ff;
}
.commentContentbox2 h2 {
  line-height: 0.7rem;
  height: 0.7rem;
}
.commentContentbox2div {
  width: 1rem;
  font-size: 0.5rem;
  line-height: 0.6rem;
  border-radius: 0.05rem;
  text-align: center;
  height: 0.6rem;
  border: 1px solid #f5f6f6;
  color: #c3c4ca;
}
.commentContentbox3 h2 {
  line-height: 0.6rem;
  height: 0.6rem;
}
.commentContentbox3 {
  position: relative;
}
.commentContentbox3 p {
  font-size: 0.18rem;
  border-bottom: 1px solid #ccc;
}
.commentContentbox3 span {
  position: absolute;
  right: 0.05rem;
  bottom: 0;
}
.commentContentbox4 h2 {
  line-height: 0.6rem;
  height: 0.6rem;
}
.commentContentbox4 dl {
  display: flex;
}
.commentContentbox4 dl dt {
  width: 1.8rem;
  height: 0.8rem;
  background-color: #f5f6f6;
  text-align: center;
  line-height: 0.8rem;
  font-size: 0.5rem;
}
.commentContentbox4 dl dt div {
  color: #c2c3c9;
  width: 100%;
  height: 100%;
}
.commentContentbox4 dl dd {
  padding-left: 0.1rem;
}
.commentContentbox5 {
  height: 2.4rem;
}
.commentContentbox5 h2 {
  line-height: 0.6rem;
  height: 0.6rem;
}
.checkbox {
  margin: 0.1rem;
}
.commentContentbox6 {
  height: 0.6rem;
  width: 100%;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  z-index: 99999;
  .box5btn {
    width: 3.5rem;
    height: 0.5rem;
    border-radius: 0.5rem;
    margin-left: 0.12rem;
    margin-top: 0.05rem;
  }
}
</style>